<template>
  <common-detail-list :title="'选择告警码'">
    <div slot="header">
      <el-button @click="$emit('close')">返回</el-button>
      <el-button type="primary" @click="submit" :loading="loading"
        >保存</el-button
      >
    </div>

    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        :model="queryParams"
        :inline="true"
        @submit.native.prevent
        ref="queryForm"
        label-width="75px"
      >
        <el-form-item label="告警类型" prop="alarmType">
          <el-select
            v-model="queryParams.alarmType"
            clearable
            style="width: 100%"
            @change="alarmTypeChange(queryParams.alarmType)"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in alarmTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
<!--
        <el-form-item label="告警子类型" prop="alarmLevel">
          <el-select v-model="queryParams.alarmBusiness" style="width: 100%">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="item in sysAlarmBusinessList"
              :key="item.id"
              :label="item.alarmBusiness"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="告警码" prop="alarmCode">
          <common-input v-model="queryParams.alarmCode" clearable />
        </el-form-item>

        <el-form-item label="告警等级" prop="alarmLevel">
          <el-select v-model="queryParams.alarmLevel" style="width: 100%">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in alarmLevelList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-search>

    <div slot="tools">
      <el-button type="primary" icon="el-icon-plus" @click="addAlarmCode" plain
        >新增
      </el-button>
    </div>

    <common-table slot="content" :data="list" v-loading="listLoading">
      <el-table-column width="55" align="center" prop="radio">
        <template slot-scope="scope">
          <el-radio
            v-model="templateRadio"
            :label="scope.$index"
            @change="changeChecked(scope.$index, scope.row)"
          >
            {{ "" }}
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column
        label="告警码"
        align="left"
        prop="alarmCode"
        width="120"
      />
      <el-table-column
        label="告警等级"
        align="left"
        prop="alarmLevelString"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="告警类型"
        align="left"
        prop="alarmTypeString"
        width="100"
      >
      </el-table-column>

      <!-- <el-table-column
        label="告警子类型"
        align="left"
        prop="alarmBusinessName"
        width="120"
      /> -->
      <el-table-column
        label="告警周期"
        align="left"
        prop="alarmPeriod"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        label="通知方式"
        align="left"
        prop="noticeTypeString"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="告警模板"
        align="left"
        prop="alarmTemplate"
        show-overflow-tooltip
      />
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <alarm-dialog
      :visible="dialogShow"
      :buttonLoading="buttonLoading"
      :noticeTypeList="noticeTypeList"
      @cancel="dialogShow = false"
      @submit="submitAddForm"
      ref="alarmDialog"
    ></alarm-dialog>
  </common-detail-list>
</template>

<script>
import { alarmCodeList, addAlarmInfo } from "@/api/datascan/alarmRules/rules";
import alarmDialog from "@/views/system/alarmCode/components/alarmDialog";
import { businessList, fetchNoticeType } from "@/api/system/alarmCode";
import { mapState } from "vuex";
export default {
  components: {
    alarmDialog,
  },
  props: {},
  data() {
    return {
      dialogShow: false,
      buttonLoading: false,
      loading: false,
      listLoading: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        alarmLevel: null,
        alarmType: null,
        alarmCode: null,
        alarmBusiness: null,
      },
      total: 0,
      list: [],
      alarmTypeOption: [],
      alarmLevelOption: [],
      templateRadio: false,
      templateSelection: {},
      sysAlarmBusinessList: [],
      noticeTypeList: []
    };
  },
  computed: {
    ...mapState("rule", ["alarmTypeList", "alarmLevelList"]),
  },

  mounted() {
    this.getList();
    this.getNoticeType();
  },

  methods: {
    transformAlarmType(val) {
      let alarmOption = this.alarmTypeList.find((item) => +item.id === val);
      return alarmOption && alarmOption.name;
    },
    transformAlarmLevel(val) {
      let alarmLevelOption = this.alarmLevelList.find(
        (item) => +item.id === val
      );
      return alarmLevelOption && alarmLevelOption.name;
    },

    alarmTypeChange(row) {
      businessList({ alarmType: row }).then((res) => {
        if (res && res.code === 200) {
          this.sysAlarmBusinessList = res.rows;
        } else {
          this.sysAlarmBusinessList = [];
        }
        this.queryParams.alarmBusiness = null;
      });
    },

    getNoticeType(){
      fetchNoticeType().then(res=>{
        if(res && res.code === 200){
          this.noticeTypeList = res.data;
        }
      })
    },

    getList() {
      this.listLoading = true;
      alarmCodeList(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.total = res.total;
            res.rows.forEach((item) => {
              if (item.alarmPeriodType === 0) {
                item.alarmPeriod = null;
              }
              if (item.alarmPeriodType === 1) {
                item.alarmPeriod =
                  "每天告警" + (item.alarmPeriodCount || 0) + "次";
              }
              if (item.alarmPeriodType === 2) {
                item.alarmPeriod =
                  "每小时告警" + (item.alarmPeriodCount || 0) + "次";
              }

              item.alarmTypeString = this.transformAlarmType(item.alarmType);
              item.alarmLevelString = this.transformAlarmLevel(item.alarmLevel);

              //通知方式
              // item.noticeTypeString = item.alarmNoticeTypeNameList.join();
              if (item.alarmNotice) {
                let noticeTypes = JSON.parse(item.alarmNotice);
                let noticeTypes2 = [];

                if (!noticeTypes[0]) {
                  noticeTypes.splice(0, 1);
                }
                let checkedNoticeTypes = noticeTypes.filter((item) => {
                  return item.checked === 0;
                });
                checkedNoticeTypes.forEach((item) => {
                  this.noticeTypeList.forEach((noticeData)=>{
                    if(noticeData.value === item.noticeType){
                      item.noticeTypeTemp = noticeData.label
                    }
                  })
                  noticeTypes2.push(item.noticeTypeTemp);
                });
                item.noticeTypeString = noticeTypes2.join();
              }
            });
            this.list = res.rows;
          } else {
            this.list = [];
            this.total = 0;
          }
        })
        .finally(() => {
          this.listLoading = false;
        });
    },

    changeChecked(index, row) {
      row.alarmTypeCN = this.transformAlarmType(row.alarmType) || "";
      this.templateSelection = row;
    },
    handleSelectionChange() {},
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },

    //保存
    submit() {
      this.$emit("getAlarmCode", this.templateSelection);
    },

    addAlarmCode() {
      this.dialogShow = true;
      this.$refs.alarmDialog.handleAdd();
    },

    //新增告警码确定
    submitAddForm(param) {
      this.buttonLoading = true;
      addAlarmInfo(param)
        .then((res) => {
          if (res && res.code === 200) {
            this.getList();
            this.dialogShow = false;
          } else {
            this.$GlobalErrorConfirm("新增失败", res.msg);
          }
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
  },
};
</script>


<style lang="scss" scoped>
</style>
